<template>
	<div class="header_icon_search_white search-icon-panel clear" v-if="!visibility">
		<div class="header_icon_left fl search_left" @click="gotoback">
            <i class="iconfont icon-back_icon icon_white"></i>
		</div>
		<div class="header_icon_search search-icon-middle">
			<!-- <i class="iconfont icon-search_icon"></i>
			<input type="text" class="header_icon_search_text" placeholder="搜索"> -->
            <mt-search 
                autofocus 
                v-model="value"
                cancel-text=""
                placeholder="搜索"
                >
                <mt-cell
                  v-for="(item,index) in defaultResult"
                  :key="index"
                  :value="item.name"
                  @click.native="getSelect(item.name)"
                  >
                </mt-cell>
            </mt-search>
            <div style="display:none;" :model="seac"></div>
		</div>
		<div class="header_icon_right fr search_right">
            <label class="mint-button-text set-text">搜索</label>
		</div>
	</div>
</template>

<script>
    export default {
        data() {
            return {
                value:'',
                name:'',
                defaultResult: '',
                seac:'1',
            }
        },
        watch:{
            value:function(msg){
                let that = this
                that.name = msg
                console.log(msg)
                that.searchCompany(msg)
            }
        },
        methods: {
            searchCompany:function(msg){
                let that = this;
                let seac = that.seac;
                if(seac == 0){
                    document.getElementsByClassName("mint-search-list-warp")[0].style.display = 'none'
                    that.seac = 1
                }else{
                    console.log(33);
                let _val = that.value;
                this.$fetch(that.$path+'/api.php/company/getExistCompany',{name:msg}).then((res) => {
                    console.log(res.data)
                    if(res.code == 200){
                        console.log(res.data)
                        document.getElementsByClassName("mint-search-list-warp")[0].style.display = ''
                        that.defaultResult = res.data
                    } 
                });
                }
            },
            // 选择
            getSelect(name) {
                console.log(999)
                document.getElementsByClassName("mint-search-list-warp")[0].style.display = 'none'
                this.value = name;
                this.seac = 0;
            },
            gotoback() {
                this.$emit('done');
            }
        },
        props: ['visibility', 'done']
    }
</script>

<style>
/* 左边 */
.search_left {
    margin: 0;
    margin-top: -0.1rem !important;
    height: 0.66rem;
    line-height: 0.66rem;
    margin-left: 0.2rem;
}
.search-icon-middle {
    width: 80% !important;
    left: 50% !important;
    margin-left: -40%;
}
.search-icon-middle .mint-search-list {
    height: 6rem;
    width: 7.5rem;
    left: -12.4%;
    top: 0.88rem;
    padding-top: 0;
}
.search-icon-middle .mint-searchbar {
    background-color: transparent;
}
.search-icon-middle .mint-searchbar-inner {
    border: 1px solid #d8d8d8;
    background-color: #f5f5f5;
    padding: 0 0.1rem;
    height: 0.54rem;
    line-height: 0.54rem;
}
.search-icon-middle .mint-searchbar-inner input {
    background-color: #f5f5f5;
    font-size: 0.24rem;
    padding: 0 0.1rem;
}
.search-icon-middle .mint-searchbar-inner .mintui-search{
    font-size: 0.34rem;
    color: #999;
    
}
.search-icon-middle .mint-cell {
    min-height: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(50%, transparent), color-stop(50%, transparent));
}
.search-icon-middle .mint-cell-value {
    padding: 0 0.2rem;
    display: block;
    text-align: left;
    width: 100%;
    height: 0.66rem;
    line-height: 0.66rem;
    margin-right: 0;
    font-size: 0.3rem;
}
.search_right {
    margin-top: -0.5rem !important;
}
.search_right .mint-button-text {
    font-size: 0.3rem;
}
.search-icon-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 10;
}

@media screen and (min-width:768px) {
    .search_left {
        margin-top: -0.2rem;
    }
    .search_right {
        margin-top: -0.6rem !important;
    }
}

</style>